<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <div class="offer-container" ref="print">
        <div class="tem_list">
          <div class="tem_main">
             <h1>青海卓英软件技术有限公司</h1>
             <h2>报 价 单</h2>
             <h4>TO：</h4>
             <p class="title">感谢惠顾，现将贵单位所需产品报价如下：</p>
             <p class="lip">一、产品价格</p>
               <div style="padding: 0 1px 0 0">
              <el-table :data="list" v-loading="listLoading" ref="detailTable"  :header-cell-style="{'text-align':'center'}"  show-summary :summary-method="getSummaries">
		            <el-table-column  label="序号"  show-overflow-tooltip width="60" align="center">
                <template slot-scope="scope" align="center">
                    <span class="text-grey">{{ scope.row.sortCode}}</span>
                 </template>
               </el-table-column>
               <el-table-column  label="品名" width="140" align="center">
				         <template slot-scope="scope" align="center" >
                     {{scope.row.name }}
                 </template>
		        	</el-table-column>
              <el-table-column  label="规格" width="100" align="center">
				         <template slot-scope="scope" align="center" >
                     {{scope.row.specs }}
                 </template>
		        	</el-table-column>
              <el-table-column  label="单位" width="60" align="center">
				         <template slot-scope="scope" align="center" >
                     {{scope.row.unit }}
                 </template>
		        	</el-table-column>
              <el-table-column  label="数量" width="60" align="center">
				         <template slot-scope="scope" align="center" >
                     {{scope.row.num }}
                 </template>
		        	</el-table-column>
			        <el-table-column  label="单价(元)" align="center" width="100">
			       	<template slot-scope="scope" align="center" >
                       <el-tag type="success">{{ scope.row.amount | currency('¥') }}</el-tag>
                 </template>
		        	</el-table-column>
               <el-table-column prop="totalamount"  label="总价(元)" align="center" width="120">
			       	<template slot-scope="scope" align="center" >
                       <el-tag type="warning">{{ scope.row.totalamount | currency('¥') }}</el-tag>
                 </template>
		        	</el-table-column>
              <el-table-column label="备注" align="left" >
			      	 <template slot-scope="scope" align="left" >
                       {{scope.row.description}}
                 </template>
		          </el-table-column>
             </el-table>
             <el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
             <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail">
               <el-col :span="24" >
              	<el-form-item label="备注说明" prop="remark">
						  	<el-input v-model="dataForm.remark"  show-word-limit :style='{"width":"100%"}' type='textarea' :autosize='{"minRows":4,"maxRows":4}' >
							  </el-input>
					   	</el-form-item>
               </el-col>
             </el-form>
             </el-row>
            </div>
             <p class="lip">二、通讯联络</p>
            <el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
             <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail">
               <el-col :span="12" >
					    	<el-form-item label="联    系    人" prop="project">
							    <el-input v-model="dataForm.creatorUserId"  readonly :style='{"width":"100%"}' >
							</el-input>
					   	</el-form-item>
					    </el-col>
				    	<el-col :span="12" >
					   	<el-form-item label="联系电话" prop="customer">
						    	<el-input v-model="dataForm.customer"  readonly :style='{"width":"100%"}' >
							</el-input>
					  	</el-form-item>
				    	</el-col>
              <el-col :span="24" >
					   	<el-form-item label="联系地址" prop="enCode">
							<el-input placeholder="西宁市南山东路7号创新创业大厦A座19楼"  readonly >
							</el-input>
					  	</el-form-item>
					   </el-col>
             </el-form>
             </el-row>
            <div class="temdate">日 期：{{ new Date()| toDate("yyyy-MM-dd")}}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      list: [],
      listLoading: true,
      visible: false,
      isDetail: false,
      dataForm: {
          enCode:undefined,
					project:undefined,
					customer:undefined,
					remark:undefined,
					appendix:[],
					zyOaPricelistList:[],
					creatorUserId:undefined,
					creatorTime:undefined,
					lastModifyUserId:undefined,
					lastModifyTime:undefined,
          sortCode:1,
					name:undefined,
					specs:undefined,
					unit:undefined,
					amount:0,
					num:1,
					description:undefined,
      },
      columnList: [
        
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    goBack() {
      this.$emit("Detailrefresh");
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          request({
            url: "/api/SubDev/ZyOaPrice/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
          });
        }
      });
      request({
        url: `/api/SubDev/ZyOaPrice/GetPriceList/${id}`,
        method: "GET",
      }).then((res) => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    getSummaries(param) {
                 const { columns, data } = param;
                 const sums = [];
                 columns.forEach((column, index) => {
                if (index === 0) {
                 sums[index] = "合计";
                 return;
                 } 
              if (column.property != undefined) {
               //加了prop属性的el-table-column 才能找到column.property
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                 sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                if (!isNaN(value)) {
                   return prev + curr; //多行相加
                 } else {
                   return prev;
                }
              }, 0);
            } else {
                sums[index] = "";
             }
               sums[index] = sums[index].toFixed(2)+"元"; //保留2位小数
            }
         });
         return sums;
       },
  },
};
</script>
<style lang="scss" scoped>
.tem_main {
  width: 1100px;
  margin: 0 auto;
}
.content1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 545px;
    padding: 8px 0;
    border-bottom: 1px solid #ebeef5;
    span {
      font-size: 16px;
      padding: 10px 0;
      color: #606266;
    }
  }
}
.el-table,
.content1 {
  width: 920px !important;
  margin: 0 auto !important;
}
h1,
h2,
h3 {
  text-align: center !important;
}
p,
h4 {
  width: 920px !important;
  margin: 0 auto !important;
}
p.title {
  border-bottom: 2px dashed #606266;
  line-height: 30px;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 15px;
  color: #606266;
  font-weight: bolder;
}
p.lip {
  padding: 20px 0;
  color: #606266;
}
.temdate {
  font-size: 14px;
  width: 802px;
  margin: 0 auto;
  text-align: right;
  margin: 20px 60px;
  color: #606266;
}
.seal {
  font-size: 14px;
  width: 480px;
  margin: 0 auto;
  text-align: right;
  margin: 10px 120px;
  padding-bottom: 40px;
  color: #606266;
}
.offer-container {
  height: 100%;
  overflow: auto;
  .tem_list {
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    background: #fff;
    .tem_main {
      width: 90%;
      margin: 0 auto;
      font-size: 14px;
      padding-top: 10px;
      color: #606266;
      h1,
      h2 {
        text-align: center;
        color: #606266;
      }
      .title {
        border-bottom: 2px dashed #606266;
        line-height: 30px;
        font-size: 14px;
        color: #606266;
      }
      >>> .el-table thead tr th {
        background-color: #fff;
        color: #606266;
      }
      .lip {
        padding: 20px 0;
        color: #606266;
      }
      .demo-form-inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .el-form-item--mini.el-form-item,
      .el-form-item--small.el-form-item {
        border-bottom: 1px solid #ebeef5;
        width: 48%;
        margin: 0;
        >>> .el-input__inner {
          border: 0 !important;
          padding: 0;
          width: 220px;
          font-size: 12px;
        }
        >>> .el-form-item__label {
          font-size: 12px;
        }
      }
      .temdate {
        text-align: right;
        margin: 20px 60px;
      }
      .seal {
        text-align: right;
        margin: 10px 120px;
        padding-bottom: 40px;
      }
    }
  }
}
</style>